<template>
	<view>
		<!-- 状态栏高度：这里需要一个空的view来占位 -->
		<view :style="'height:'+ stateHeight + 'px'"></view>
		<!-- 头部导航栏 -->
		<view class="header" :style="'height:'+ navHeight + 'px'">
			<view @click="toSearch" class=" iconfont icon-sousuo"></view>
			<text>{{headerText}}</text>
		</view>
		<view class="content">
			<!-- banner轮播 -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="item in bannerImg" :ref="item.id" @click="banBtn(item.id)" :key="item.id">
						<view class="swiper-item ">
							<image :src="item.img"></image>
						</view>
					</swiper-item>

				</swiper>
			</view>


			<!-- 分类 -->
			<!-- 保证 -->
			<view class="guarantee">
				<view class="iconfont icon-licheng">
					<text>里程兑换</text>
				</view>
				<view style="font-size: 40rpx;" class="iconfont icon-zhengpinbaozhang1">
					<text>优选正品</text>
				</view>
				<view class="iconfont icon-tuihuobaozhang">
					<text>无忧退换货</text>
				</view>
			</view>
			<!-- 具体分类 -->
			<view class="category">
				<view @click="toDetails(item.id)" class="kind " v-for="item in  classification" :key="item.id">
					<image :src="item.img"></image>
					<text>{{item.category}}</text>
				</view>

			</view>
			<!-- 抢购 -->
			<view class="SnapUp">
				<!-- tltle -->
				<view class="tltle">
					<text>100公里里程0元抢</text>
					<text style="color: red;">结束倒计时：&nbsp; 01:46:30</text>
				</view>
				<!-- 内容 -->
				<view class="SnapUpShop" v-for="item in SnapUpShop" :key="item.id">
					<view class="left">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="middle">
						<text>{{item.name}}</text>
						<text style="color: red;text-decoration: line-through;">￥{{item.oldPrice}}</text>
						<text style="color: #CCCCCC;">限量 {{item.Limit}} 件</text>
						<text style="color: red;">还剩 {{item.surplus}} 件</text>
					</view>
					<view class="right">
						<text @click="toSnapUpShop(item.id)">马上抢</text>
					</view>
				</view>
				<view class="next" @click="next">
					<text>下场福利预告>></text>
				</view>

			</view>

			<!-- 福利集市 -->
			<view class="welfare">
				<view class="welfare-top">
					<text>福利集市</text>
					<text style="color: red;">倒计时：01天 01:46:30</text>
				</view>
				<view class="welfare-bottom">

					<scroll-view class="scroll-x" scroll-x="true">
						<view @click="toWelfareShop(item.id)" class="welfare-details" v-for="item in welfareShops"
							:key="item.id">
							<view class="welfareKind">
								<image :src="item.img" mode=""></image>
								<text>{{item.name}}</text>
								<text
									style="width: 228rpx;background-color: red;color: azure;">{{item.discounts}}</text>
								<text style="color: red;font-size: 28rpx;">￥ {{item.price}} </text>
							</view>

						</view>
					</scroll-view>

				</view>
			</view>
			<!-- 儿童专区 -->
			<view class="kidsOnly">
				<view class="kidsOnly-top">
					<text>儿童专区</text>
				</view>
				<view class="kidsOnly-bottom">


					<!--儿童专区轮播 -->
					<view>
						<swiper class="swiper2" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="4000" :duration="duration">
							<swiper-item v-for="item in kidsOnlyData" :key="item.id" :ref="item.id">
								<view class="swiper-item2 ">
									<view class="kidsOnly-details" v-for="item2 in item" :key="item2.id"
										@click="()=>toKidsOnly(item2.id)">
										<image :src="item2.img">
										</image>
										<view>
											<text>{{item2.name}}</text>
											<text style="color: red;">{{item2.discounts}}</text>
											<text style="color: red;font-size: 34rpx;">￥ {{item2.price}} </text>
										</view>
									</view>
								</view>
							</swiper-item>

						</swiper>
					</view>




				</view>
			</view>
			<!-- 人气爆款 -->
			<view class="popularity">
				<view class="popularity-top">
					<text>人气爆款</text>
				</view>
				<view class="popularity-bottom">
					<!-- 人气爆款轮播 -->

					<view>
						<swiper class="swiper3" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="4000" :duration="duration">
							<swiper-item v-for="item in popData" :key="item.id" :ref="item.id">
								<view class="swiper-item3 ">

									<view @click="()=>toPopularity(item3.id)" class="popularity-details"
										v-for="item3 in item" :key="item3.id">
										<image :src="item3.img">
										</image>
										<text> {{item3.name}} </text>
										<text style="width: 228rpx;color: red;"> {{item3.discounts}} </text>
										<text style="color: red;font-size: 30rpx;">￥ {{item3.price}} </text>
									</view>




								</view>
							</swiper-item>

						</swiper>
					</view>
				</view>
			</view>

			<!-- 商品排行 -->
			<view class="ranking">
				<view class="ranking-top">
					<text @click="rankBtn(item.id)" v-for="item in rankingTop" :key="item.id">
						{{item.name}}
						<text :class="item.id===3?'iconfont icon-shangxiajiantou':''"></text>
					</text>

				</view>
				<view class="ranking-bottom">
					<view @click="toRank(item.id)" v-for="item in rank" :key="item.id" class="ranking-details">
						<image :src="item.img">
						</image>
						<text>{{item.name}}</text>
						<text style="width: 228rpx;color: red;"> {{item.discounts}} </text>
						<text style="color: red;font-size: 30rpx;">￥ {{item.price}} </text>
					</view>
				</view>
			</view>
			<!-- 购物车按钮 -->
			<button class="shopCar">
				<view style="width: 54rpx;height: 54rpx;" class="iconfont icon-gouwuche"></view>
				<text style="font-size: 17rpx;">购物车</text>
			</button>

		</view>



	</view>


</template>

<script>
	export default {
		data() {
			return {
				navHeight: 0, //导航栏高度
				stateHeight: 0, //状态栏高度
				top: 0, //胶囊上下边距
				headerText: '当前可用抵扣里程数：387.6公里', //导航栏文字
				bannerImg: [{
					id: 1,
					img: 'https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa5d/687ce81d/cr/s/q.jpg'
				}, {
					id: 2,
					img: 'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000367/10056316579711/FocusFullshop/CkJqZnMvdDEvODc5NzMvMjIvMzQ2NzgvMTY3NjYvNjNmZDA1NWRGZWUwZjJiMDAvZjkzNTNiNWY0Mzk4YjdkZS5wbmcSCTMtdHlfMF81NDACOO-LekIQCgzmtbflsJTlhrDnrrEQAUIQCgzotKjkvJjku7flu4kQAkIQCgznq4vljbPmiqLotK0QBkIKCgblipvojZAQB1j_3rXZ1qQC/cr/s/q.jpg'
				}, {
					id: 3,
					img: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/180305/4/15002/52454/60f7cb1cE1cd8f0e3/fc8de57667a49ab5.jpg.webp'
				}], //轮播图
				indicatorDots: true, //是否显示面板指示点
				autoplay: true, //是否自动切换
				interval: 3000, //自动切换时间间隔
				duration: 500, //滑动动画时长
				classification: [{
					id: 1,
					img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01cGUj9O1o9PEFexgTh_!!2200657715182-0-sm.jpg_Q75.jpg',
					category: "全部商品"
				}, {
					id: 2,
					img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01cGUj9O1o9PEFexgTh_!!2200657715182-0-sm.jpg_Q75.jpg',
					category: "女士"
				}, {
					id: 3,
					img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01cGUj9O1o9PEFexgTh_!!2200657715182-0-sm.jpg_Q75.jpg',
					category: "童装"
				}, {
					id: 4,
					img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01cGUj9O1o9PEFexgTh_!!2200657715182-0-sm.jpg_Q75.jpg',
					category: "OUTLETS"
				}, {
					id: 5,
					img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01cGUj9O1o9PEFexgTh_!!2200657715182-0-sm.jpg_Q75.jpg',
					category: "双肩背包"
				}, {
					id: 6,
					img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01cGUj9O1o9PEFexgTh_!!2200657715182-0-sm.jpg_Q75.jpg',
					category: "超轻背包"
				}, {
					id: 7,
					img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01cGUj9O1o9PEFexgTh_!!2200657715182-0-sm.jpg_Q75.jpg',
					category: "帐篷"
				}, {
					id: 8,
					img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01cGUj9O1o9PEFexgTh_!!2200657715182-0-sm.jpg_Q75.jpg',
					category: "全部分类"
				}, ], //商品分类
				SnapUpShop: [{
					id: 1,
					img: 'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/104218/2023/0210/39/07a79efb-b3b2-4c03-aca4-f177fcd03d79_344x344_90.jpg',
					name: '2019行者裤',
					oldPrice: 999,
					Limit: 100,
					surplus: 22
				}, {
					id: 2,
					img: 'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/104218/2023/0210/39/07a79efb-b3b2-4c03-aca4-f177fcd03d79_344x344_90.jpg',
					name: 'xxxx',
					oldPrice: 1255,
					Limit: 34,
					surplus: 55
				}, ], //抢购商品
				welfareShops: [{
						id: 1,
						img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01mLQxcs1o9PEAb2otQ_!!2200657715182-0-sm.jpg_Q75.jpg',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣300元',
						price: 500,
					}, {
						id: 2,
						img: 'https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/190490/25/33010/63265/64017277F85b1391d/2be866e6a9cbfae4.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣500元',
						price: 600,
					},
					{
						id: 3,
						img: 'https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/99086/30/31706/168668/632abe02Edd146b5d/990d84ab3e906c8d.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣100元',
						price: 5700,
					}, {
						id: 4,
						img: 'https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/205537/37/28060/206351/63633b1cE5ef4ecd0/46b50edf4b8afc67.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣200元',
						price: 56700,
					},
				], //福利商品
				kidsOnly: [{
					id: 1,
					img: 'https://gw.alicdn.com/tps/i2/2200657715182/O1CN01BhhCfM1o9PEQRNzIY_!!2200657715182-0-sm.jpg_Q75.jpg',
					name: '防寒服冬季防风加厚外套户外加绒',
					discounts: '100公里可抵扣200元',
					price: 11,
				}, {
					id: 2,
					img: 'https://gw.alicdn.com/tps/i2/2200657715182/O1CN01BhhCfM1o9PEQRNzIY_!!2200657715182-0-sm.jpg_Q75.jpg',
					name: '防寒服冬季防风加厚外套户外加绒',
					discounts: '100公里可抵扣200元',
					price: 22,
				}, {
					id: 3,
					img: 'https://gw.alicdn.com/tps/i2/2200657715182/O1CN01BhhCfM1o9PEQRNzIY_!!2200657715182-0-sm.jpg_Q75.jpg',
					name: '防寒服冬季防风加厚外套户外加绒',
					discounts: '100公里可抵扣200元',
					price: 33,
				}, {
					id: 4,
					img: 'https://gw.alicdn.com/tps/i2/2200657715182/O1CN01BhhCfM1o9PEQRNzIY_!!2200657715182-0-sm.jpg_Q75.jpg',
					name: '防寒服冬季防风加厚外套户外加绒',
					discounts: '100公里可抵扣200元',
					price: 44,
				}, ], //儿童专区
				kidsOnlyData: [], //儿童专区数据
				pop: [{
						id: 1,
						img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01mLQxcs1o9PEAb2otQ_!!2200657715182-0-sm.jpg_Q75.jpg',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣300元',
						price: 500,
					}, {
						id: 2,
						img: 'https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/190490/25/33010/63265/64017277F85b1391d/2be866e6a9cbfae4.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣500元',
						price: 600,
					},
					{
						id: 3,
						img: 'https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/99086/30/31706/168668/632abe02Edd146b5d/990d84ab3e906c8d.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣100元',
						price: 5700,
					}, {
						id: 4,
						img: 'https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/205537/37/28060/206351/63633b1cE5ef4ecd0/46b50edf4b8afc67.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣200元',
						price: 56700,
					}, {
						id: 5,
						img: 'https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/205537/37/28060/206351/63633b1cE5ef4ecd0/46b50edf4b8afc67.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣200元',
						price: 56700,
					}, {
						id: 6,
						img: 'https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/205537/37/28060/206351/63633b1cE5ef4ecd0/46b50edf4b8afc67.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣200元',
						price: 56700,
					}, {
						id: 7,
						img: 'https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/205537/37/28060/206351/63633b1cE5ef4ecd0/46b50edf4b8afc67.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣200元',
						price: 56700,
					}, {
						id: 8,
						img: 'https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/205537/37/28060/206351/63633b1cE5ef4ecd0/46b50edf4b8afc67.jpg.webp',
						name: '防寒服冬季防风加厚外套',
						discounts: '100公里可抵扣200元',
						price: 56700,
					},
				], //人气爆款
				popData: [], //人气爆款数据
				rank: [{
					id: 1,
					img: 'https://gw.alicdn.com/tps/i1/2200657715182/O1CN01mLQxcs1o9PEAb2otQ_!!2200657715182-0-sm.jpg_Q75.jpg',
					name: '防寒服冬季防风加厚外套',
					discounts: '100公里可抵扣300元',
					price: 500,
				}, {
					id: 2,
					img: 'https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/190490/25/33010/63265/64017277F85b1391d/2be866e6a9cbfae4.jpg.webp',
					name: '防寒服冬季防风加厚外套',
					discounts: '100公里可抵扣500元',
					price: 600,
				}, ], //排行数据
				rankingTop: [{
					id: 1,
					name: '综合'
				}, {
					id: 2,
					name: '销量'
				}, {
					id: 3,
					name: '价格'
				}, ], //排行顶部按钮
			}
		},
		onLoad() {
			this.getNavInfo()
			console.log('导航栏高度', this.navHeight);
			console.log('状态栏高度', this.stateHeight);
			this.kidsOnlyData = this.splitArr(this.kidsOnly, 2);
			console.log('****', this.kidsOnlyData);
			this.popData = this.splitArr(this.pop, 4);
			console.log('****', this.popData);

		},
		methods: {
			//获取导航栏信息
			getNavInfo() {
				let height = 0; //  接收状态栏高度
				uni.getSystemInfo({
						success(res) {
							height = res.statusBarHeight //状态栏高度
						}
					}),
					this.stateHeight = height,
					this.top = (uni.getMenuButtonBoundingClientRect().top - this.stateHeight) * 2, //胶囊上下边距
					this.navHeight = uni.getMenuButtonBoundingClientRect().height + this.top //胶囊高度


			},
			/* 拆分儿童专区轮播数据 */
			splitArr(arr, splitLength) {
				let start = 0; //开始下标
				let newArr = []; //存放拆分后的数据
				while (start < arr.length) {
					newArr.push(arr.slice(start, (start += splitLength)))
				}
				return newArr
			},

			toSearch() {
				console.log('跳转到搜索页');
			},
			//轮播图跳转并传id到详情页
			banBtn(id) {
				console.log(`点击了第${id}张轮播图`);

			},
			//商品分类跳转并传ID
			toDetails(id) {
				console.log(`点击了第${id}个分类`);
			},
			toSnapUpShop(id) {
				console.log(`点击了第${id}个抢购商品`);
			},
			next() {
				console.log('点击了下场福利预告');
			},
			toWelfareShop(id) {
				console.log(`点击了第${id}个福利商品`);
			},
			toKidsOnly(id) {
				console.log(`点击了儿童专区第${id}个商品`);
			},
			rankBtn(id) {
				console.log(`点击了排行第${id}个按钮`);
			},
			toRank(id) {
				console.log(`点击了排行第${id}个商品`);
			},
			toPopularity(id) {
				console.log(`点击了人气爆款第${id}个商品`);
			},
		}
	}
</script>

<style lang="less" scoped>
	@import '../../static/iconfont/lf/iconfont.css';


	/* 导航栏 */
	.header {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #cccccc;

		view {
			font-size: 42rpx;
			color: #aebbbb;
			margin-left: 20rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 28rpx;
			color: #666666;
			text-align: center;
		}
	}

	/* 内容 */
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;


		/* banner轮播 */
		.uni-margin-wrap {
			width: 690rpx;
			width: 95%;
			margin-top: 20rpx;

		}

		.swiper {
			height: 300rpx;
		}

		.swiper-item {
			display: block;
			width: 100%;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;

			image {
				width: 100%;

			}
		}

		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}

		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}




		.info {
			position: absolute;
			right: 20rpx;
		}

		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}

		/* 保证 */
		.guarantee {
			background-color: #ffffff;
			width: 90%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 35rpx;
			}

			text {
				font-weight: 200;
				font-style: normal;
				font-size: 30rpx;
				color: #666666;
				margin-left: 5rpx;
			}
		}

		/* 商品分类 */
		.category {
			width: 100%;
			background-color: #ffffff;
			display: flex;
			flex-wrap: wrap;


			image {
				width: 90rpx;
				height: 90rpx;
			}

			text {
				font-weight: 400;
				color: black;
				margin-top: 10rpx;
				font-size: 23rpx;
			}

			.kind {
				width: 25%;
				height: 132rpx;
				margin-top: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		/* 抢购 */
		.SnapUp {
			width: 95%;
			/* height: 550rpx; */
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;

			.tltle {
				width: 95%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				text {
					font-weight: 500;
					font-style: normal;
					font-size: 26rpx;
				}
			}

			.SnapUpShop {
				width: 95%;
				height: 170rpx;
				border-bottom: 2rpx solid gainsboro;
				display: flex;
				margin-top: 20rpx;

				view {
					width: 33%;
					height: 156rpx;
				}

				text {
					font-size: 26rpx;
					margin-top: 4rpx;
				}

				.middle {
					display: flex;
					flex-direction: column;

				}

				.right {
					display: flex;
					justify-content: end;
					align-items: center;

					text {
						width: 100rpx;
						height: 50rpx;
						border-radius: 20rpx;
						background-color: red;
						color: white;
						text-align: center;
						line-height: 50rpx;
					}
				}



				image {
					width: 194rpx;
					height: 152rpx;
				}
			}

			.next {
				width: 95%;
				height: 72rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: red;
				text-align: center;
				line-height: 72rpx;
			}
		}

		/* 福利集市 */
		.welfare {
			width: 95%;
			height: 470rpx;
			margin-top: 20rpx;
			background-color: #ffffff;

			.welfare-top {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;

				text {
					font-size: 26rpx;
					font-weight: 400;
					margin-right: 40rpx;
				}
			}

			.welfare-bottom {

				.scroll-x {
					width: 100%;
					white-space: nowrap;
				}

				.welfare-details {
					width: 35%;
					height: 388rpx;
					margin-right: 10rpx;
					background-color: #fafafa;
					display: inline-block;


					.welfareKind {
						width: 100%;
						white-space: normal;
						background-color: #fafafa;
						display: flex;
						flex-direction: column;
						justify-content: space-around;


					}

					image {
						width: 228rpx;
						height: 216rpx;
					}

					text {
						width: 228rpx;
						font-size: 26rpx;
						font-weight: 400;
					}
				}
			}
		}

		/* 儿童专区 */
		.kidsOnly {
			width: 95%;

			.kidsOnly-top {
				width: 100%;
				height: 90rpx;
				line-height: 80rpx;
				font-size: 26rpx;
				background-color: #ffffff;
			}

			.kidsOnly-bottom {
				width: 100%;
				height: 434rpx;

				.swiper2 {
					width: 100%;
					height: 475rpx;

				}

				.swiper-item2 {
					width: 100%;


				}

				.kidsOnly-details {
					width: 100%;
					height: 204rpx;
					margin-bottom: 20rpx;
					background-color: #fafafa;
					display: flex;

					image {
						width: 234rpx;
						height: 192rpx;
					}

					view {
						flex: 1;
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					text {
						width: 228rpx;
						font-size: 26rpx;
						font-weight: 400;
					}
				}
			}
		}

		/* 人气爆款 */
		.popularity {
			width: 95%;
			margin-top: 20rpx;



			.popularity-top {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;

				text {
					font-size: 26rpx;
					font-weight: 400;

				}
			}

			.popularity-bottom {

				// display: flex;
				// flex-wrap: wrap;
				height: 840rpx;
				width: 100%;

				.swiper3 {
					width: 100%;
					height: 840rpx;

					.swiper-item3 {
						width: 100%;
						/* border: 1px solid red; */
						display: flex;
						flex-wrap: wrap;
					}
				}



				.popularity-details {
					width: 50%;
					height: 416rpx;
					background-color: #fafafa;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;


					image {
						width: 240rpx;
						height: 216rpx;
					}

					text {
						width: 228rpx;
						font-size: 26rpx;
						font-weight: 400;
					}
				}
			}
		}

		/* 商品排行 */
		.ranking {
			width: 95%;

			.ranking-top {
				width: 50%;
				height: 88rpx;
				line-height: 88rpx;
				display: flex;
				justify-content: space-between;

				text {
					font-size: 26rpx;
					font-weight: 400;

				}
			}

			.ranking-bottom {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.ranking-details {

					width: 50%;
					height: 416rpx;
					background-color: #fafafa;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;


					image {
						width: 268rpx;
						height: 240rpx;
					}

					text {
						width: 228rpx;
						font-size: 26rpx;
						font-weight: 400;
					}
				}

			}
		}

		.shopCar {
			width: 106rpx;
			height: 106rpx;
			box-shadow: #d7d7d7;
			border-radius: 50%;
			color: black;
			background-color: #e4e4e4;
			z-index: 111;
			position: fixed;
			bottom: 30rpx;
			right: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
</style>
